<template>
  <el-dialog
    :before-close="beforeClose"
    :visible.sync="show"
    :title="title"
    width="800px"
    @close="close"
    @closed="closed"
  >
    <el-form label-width="80px" :model="form">
      <el-row>
        <el-col :sm="12">
          <el-form-item label="姓名">
            <el-input v-model="form.real_name" type="text" />
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="form.sex" type="text" />
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="form.age" type="text" />
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="form.id_card" type="text" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="form.mobile" type="text" />
          </el-form-item>
          <el-form-item label="户籍地址">
            <address-select v-model="form.cardAddress" class="k-mr-10" />
            <el-input v-model="form.card_address" type="text" />
          </el-form-item>
          <el-form-item label="现居地址">
            <address-select v-model="form.liveAddress" class="k-mr-10" />
            <el-input v-model="form.live_address" type="text" />
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="人才引进">
            <el-switch v-model="form.is_attract" type="text" />
          </el-form-item>
          <el-form-item label="就业情况">
            <el-input v-model="form.employment" type="text" />
          </el-form-item>
          <el-form-item label="在职公司">
            <el-input v-model="form.company_name" type="text" />
          </el-form-item>
          <el-form-item label="在职岗位">
            <el-input v-model="form.company_job" type="text" />
          </el-form-item>
          <el-form-item label="工作时段">
            <el-input v-model="form.job_time" type="text" />
          </el-form-item>
          <el-form-item label="公司地址">
            <address-select v-model="form.companyAddress" class="k-mr-10" />
            <el-input v-model="form.company_address" type="text" />
          </el-form-item>
          <el-form-item label="工作状况">
            <el-input v-model="form.job_status" type="text" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import AddressSelect from '@/components/Select/addressSelect'
import { create, edit } from '@/api/floating'
export default {
  name: 'Index',
  components: { AddressSelect },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'view'
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      show: false,
      form: {
        id: '',
        real_name: '',
        sex: '',
        age: '',
        id_card: '',
        mobile: '',
        created_time: '',
        deleted_time: '',
        employment: '',
        updated_time: '',
        is_attract: '',
        cardAddress: {
          area: '',
          city: '',
          province: '',
          street: ''
        },
        liveAddress: {
          area: '',
          city: '',
          province: '',
          street: ''
        },
        companyAddress: {
          area: '',
          city: '',
          province: '',
          street: ''
        },
        card_address: '',
        card_area: '',
        card_city: '',
        card_province: '',
        card_street: '',

        company_address: '',
        company_area: '',
        company_city: '',
        company_province: '',
        company_street: '',
        company_name: '',
        company_job: '',

        job_status: '',
        job_time: '',

        live_address: '',
        live_area: '',
        live_city: '',
        live_province: '',
        live_street: ''

      }
    }
  },
  computed: {
    title() {
      let text = ''
      switch (this.type) {
        case 'view':
          text = '查看'
          break
        case 'create':
          text = '新建'
          break
        case 'edit':
          text = '编辑'
          break
      }
      return text
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.show = val
      }
    }
  },
  mounted() {
    this.show = this.visible
  },
  methods: {
    handleChange(value) {
      console.log(value)
    },
    getData() {
      console.log('获取数据')
    },
    handleClose() {
      console.log('点击关闭')
      this.beforeClose()
    },
    handleSubmit() {
      console.log('点击确定')
      this.form.id = this.data.id
      this.form.card_area = this.form.cardAddress.area
      this.form.card_city = this.form.cardAddress.city
      this.form.card_province = this.form.cardAddress.province
      this.form.card_street = this.form.cardAddress.street
      this.form.live_area = this.form.liveAddress.area
      this.form.live_city = this.form.liveAddress.city
      this.form.live_province = this.form.liveAddress.province
      this.form.live_street = this.form.liveAddress.street
      this.form.company_area = this.form.companyAddress.area
      this.form.company_city = this.form.companyAddress.city
      this.form.company_province = this.form.companyAddress.province
      this.form.company_street = this.form.companyAddress.street
      if (this.type === 'create') {
        create(this.form).then(res => {
          console.log('保存结果', res)
          this.$notify.success('保存成功')
          this.handleClose()
        })
      }
      if (this.type === 'edit') {
        edit(this.form).then(res => {
          console.log('保存结果', res)
          this.$notify.success('保存成功')
          this.handleClose()
        })
      }
    },
    beforeClose() {
      console.log('关闭前的回调')
      this.show = false
      this.$emit('update:visible', false)
      this.$emit('refresh')
    },
    close() {
      console.log('关闭的回调')
    },
    closed() {
      console.log('关闭动画结束后的回调')
    }
  }
}
</script>

<style scoped>

</style>
